<template>
  <div class="flex border border-solid border-black p-[10px]">
    <!-- 承运商 -->
    <div class="border border-solid border-black p-[20px] mr-[20px] w-[50%]">
      <div class="mb-[10px]">司机信息</div>
      <div class="mb-[60px] relative">
        <Textarea
          v-model:value="message"
          autosize
          placeholder="智能识别，黏贴信息，自动拆分。示例：金小金，13622755946，粤A9K9E6，441421199907279910"
          :rows="5"
        />
        <Button
          class="absolute right-[0] bottom-[-50px]"
          type="primary"
          @click="smartParse(message)"
          >识别</Button
        >
      </div>

      <FormItem label="司机姓名" name="driverName">
        <Input v-model:value="formState.driverName" />
      </FormItem>

      <FormItem label="联系方式" name="driverPhone">
        <Input v-model:value="formState.driverPhone" />
      </FormItem>

      <FormItem label="车牌号" name="vehicleNo">
        <Input v-model:value="formState.vehicleNo" />
      </FormItem>

      <FormItem label="司机身份证" name="driverIdCard">
        <Input v-model:value="formState.driverIdCard" />
      </FormItem>

      <FormItem label="运输要求">
        <Textarea v-model:value="formState.deliveryRemark" showCount :maxlength="100" :rows="5" />
      </FormItem>
    </div>
    <!-- 仓库 -->
    <div class="border border-solid border-black p-[20px] w-[50%]">
      <div class="mb-[10px]">仓库指令</div>
      <WareHouse :queryParams="props.queryParams" />
    </div>
  </div>

  <BasicModal
    v-bind="$attrs"
    :height="400"
    width="60%"
    @register="register"
    title="智能识别结果确定"
    @ok="submit"
  >
    <div class="flex w-[50%] mb-[20px]">
      <span class="w-[100px]">司机姓名：</span>
      <Input v-model:value="driverName" />
    </div>
    <div class="flex w-[50%] mb-[20px]">
      <span class="w-[100px]">联系方式：</span>
      <Input v-model:value="driverPhone" />
    </div>
    <div class="flex w-[50%] mb-[20px]">
      <span class="w-[100px]">车牌号：</span>
      <Input v-model:value="vehicleNo" />
    </div>
    <div class="flex w-[50%] mb-[20px]">
      <span class="w-[110px]">司机身份证：</span>
      <Input v-model:value="driverIdCard" />
    </div>

    <div class="text-[red]">请仔细核对识别结果，避免信息有误、错发。</div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { onMounted, ref, reactive } from 'vue';
  import { BasicModal, useModal } from '@/components/Modal';
  import type { UnwrapRef } from 'vue';
  import { FormItem, Input, Textarea, Button } from 'ant-design-vue';
  import type { SelfPickupInfo } from './types/types';
  import WareHouse from './WareHouse.vue';
  import smart from '@/utils/smartParse';

  const props = defineProps({
    queryParams: { type: Object },
  });

  onMounted(async () => {
    formState = props.queryParams as any;
  });

  const [register, { openModal: openModal, closeModal }] = useModal();

  const message = ref('');
  const driverName = ref('');
  const vehicleNo = ref('');
  const driverIdCard = ref('');
  const driverPhone = ref('');

  let formState: UnwrapRef<SelfPickupInfo> = reactive({
    driverName: '',
    driverPhone: '',
    vehicleNo: '',
    driverIdCard: '',
    deliveryRemark: '',

    consigneeWarehouseId: '', // 仓库id
    warehouseRemark: '', // 出库要求
    isUrgant: 0, //是否加急
    isDelivery: 1, // 是否生成送货单
    isPrintDelivery: 1, // 是否打印送货单
    batchId: '',
  });

  const smartParse = (e) => {
    // const name = extractRealName(e);
    // e = e.replaceAll(/\s/g, '');
    // // const phone = e.replaceAll(/.*(\d{11}).*/g, '$1');
    // const phone = e.match(/(86-[1][0-9]{10}) | (86[1][0-9]{10})|([1][0-9]{10})/g)[0];
    // const idCard = e.replaceAll(/.*(\d{18}).*/g, '$1');

    // const vehicle = event.replaceAll(
    //   /.*([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领]\w+).*/g,
    //   '$1',
    // );
    // const name = /([\u4e00-\u9fa5]{2,4})/.exec(e)[0];

    // let event = e.replaceAll(/\s/g, '');
    // const vehicle = findPlateNumbers(event);
    // let varchar = e.replace(/[\n\r,，]/g, ' ');
    const { name, idCard, phone, vehicle } = smart(e);

    driverName.value = name;
    vehicleNo.value = vehicle;
    driverIdCard.value = idCard;
    driverPhone.value = phone;
    openModal(true);
  };

  const submit = async () => {
    formState.driverName = driverName.value;
    formState.vehicleNo = vehicleNo.value;
    formState.driverIdCard = driverIdCard.value;
    formState.driverPhone = driverPhone.value;

    closeModal();
  };
</script>
